<template>
  <el-dialog :title="formData.id ? '编辑信息' : '新增信息'" v-model="dialogVisible" width="800px">
    <el-form :model="formData" label-width="120px" :inline="true">
      <el-form-item label="部门">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px" v-model="formData.department"></el-input>
      </el-form-item>
      <el-form-item label="业务员">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px" v-model="formData.salesman"></el-input>
      </el-form-item>
      <el-form-item label="客户名称">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.customerName"></el-input>
      </el-form-item>
      <el-form-item label="客户订单号">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.customerOrder"></el-input>
      </el-form-item>
      <el-form-item label="类别">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px" v-model="formData.category"></el-input>
      </el-form-item>
      <el-form-item label="物料代码">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.materialCode"></el-input>
      </el-form-item>
      <el-form-item label="产品名称">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.productName"></el-input>
      </el-form-item>
      <el-form-item label="产品型号">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.productModel"></el-input>
      </el-form-item>
      <el-form-item label="合同备注">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.contractRemarks"></el-input>
      </el-form-item>
      <el-form-item label="单位">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px" v-model="formData.unit"></el-input>
      </el-form-item>
      <el-form-item label="订单数量">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.orderQuantity"></el-input>
      </el-form-item>
      <el-form-item label="下单日期">
        <el-date-picker v-model="formData.orderDate" type="date" placeholder="选择日期时间"
          format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="合同交期">
        <el-date-picker v-model="formData.deliveryDate" type="date" placeholder="选择日期时间"
          format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="变更后交期">
        <el-date-picker v-model="formData.changeDate" type="date" placeholder="选择日期时间"
          format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="责任工程师">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.responsibleEngineer"></el-input>
      </el-form-item>
      <el-form-item label="在制状态">
        <el-select v-model="formData.productionStatus" placeholder="请选择">
          <el-option label="待设计" value="待设计"></el-option>
          <el-option label="设计中" value="设计中"></el-option>
          <el-option label="外协中" value="外协中"></el-option>
          <el-option label="待下料" value="待下料"></el-option>
          <el-option label="下料中" value="下料中"></el-option>
          <el-option label="待折弯" value="待折弯"></el-option>
          <el-option label="折弯中" value="折弯中"></el-option>
          <el-option label="待焊接" value="待焊接"></el-option>
          <el-option label="焊接中" value="焊接中"></el-option>
          <el-option label="待喷涂" value="待喷涂"></el-option>
          <el-option label="喷涂中" value="喷涂中"></el-option>
          <el-option label="待组装" value="待组装"></el-option>
          <el-option label="组装中" value="组装中"></el-option>
          <el-option label="返工中" value="返工中"></el-option>
          <el-option label="已完成" value="已完成"></el-option>
          <el-option label="已完成" value="已完成"></el-option>
          <el-option label="已完成" value="已完成"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入库时间">
        <el-date-picker v-model="formData.storageTime" type="date" placeholder="选择日期时间"
          format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="出货日期">
        <el-date-picker v-model="formData.shippingDate" type="date" placeholder="选择日期时间"
          format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="是否外协">
        <el-select v-model="formData.outsourced" placeholder="请选择">
          <el-option label="是" value="0"></el-option>
          <el-option label="否" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="投产数量">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.productionQuantity"></el-input>
      </el-form-item>
      <el-form-item label="已发货数量">
        <el-input :maxlength="50" :show-word-limit="true" style="width: 220px"
          v-model="formData.quantityShipped"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input :maxlength="200" :show-word-limit="true" style="width: 570px" type="textarea" :rows="2"
          placeholder="请输入内容" v-model="formData.remarks">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { createBydspecialPojectData, getInfo, updateBydSpecialPojectData } from '@/views/subdev/special/helper/api';

const props = defineProps({
  id: {
    type: [String, Number],
    default: null
  }
});

const emit = defineEmits(['refresh']);

const dialogVisible = ref(false);
const formData = reactive({
  department: "",
  salesman: "",
  customerName: "",
  customerOrder: "",
  category: "",
  materialCode: "",
  productName: "",
  productModel: "",
  contractRemarks: "",
  unit: "",
  orderQuantity: "",
  orderDate: "",
  deliveryDate: "",
  changeDate: "",
  responsibleEngineer: "",
  productionStatus: "",
  storageTime: "",
  shippingDate: "",
  outsourced: "",
  productionQuantity: "",
  quantityShipped: "",
  remark: ""
});

const isEdit = computed(() => props.id !== null);

const showDialog = (data) => {
  dialogVisible.value = true;
  if (data?.id) {
    getInfo(data.id).then(res => {
      Object.assign(formData, res);
    }).catch(err => {
      ElMessage.error('获取数据失败');
      console.error(err);
    });
  } else {
    Object.keys(formData).forEach(key => formData[key] = '');
  }
};

const submitForm = async () => {
  try {
    if (formData.id) {
      await updateBydSpecialPojectData(formData);
      ElMessage.success('编辑成功');
    } else {
      await createBydspecialPojectData(formData);
      ElMessage.success('新增成功');
    }
    dialogVisible.value = false;
    emit('refresh');
  } catch (err) {
    ElMessage.error('操作失败');
    console.error(err);
  }
};

defineExpose({ showDialog });
</script>

<style lang="scss" scoped>
/* 可根据需要添加样式 */
::v-deep .el-form-item {
  margin-bottom: 10px !important;
}
</style>
